<template>
  <div>
    <div class="container" style="padding: 15px">
      <div class="handle-box" style="margin-left: 8px; margin-bottom: 20px">
        <el-select
          v-model="queryParam.fkCourseName"
          filterable
          placeholder="请输入课程名称"
          style="width: 170px; margin-left: 10px"
        >
          <el-option label="所有课程" value=""></el-option>
          <el-option
            v-for="item in courses"
            :key="'query' + item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-input
          clearable
          v-model="queryParam.examName"
          placeholder="考试名称"
          class="handle-input mr10"
          style="width: 200px; margin-left: 10px; margin-right: 10px"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <el-card class="card" style="width: 384px" v-if="exams.length === 0">
        <div style="padding: 14px">
          <i class="el-icon-info" style="font-size: 30px"
            ><span
              style="
                font-size: 15px;
                height: 30px;
                line-height: 30px;
                vertical-align: middle;
              "
              >&nbsp;暂无数据！请在上方确认查找条件！</span
            ></i
          >
        </div>
      </el-card>
      <el-card
        v-for="(exam, index1) in exams"
        :key="index1"
        :body-style="{ padding: '0px' }"
        class="card"
      >
        <div style="padding: 14px">
          <div style="margin-bottom: 2px">
            <span class="span_label">考试名：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="exam.examName"
              placement="top"
            >
              <span class="span_info" :title="exam.examName">{{
                exam.examName
              }}</span></el-tooltip
            >
          </div>
          <div style="margin-bottom: 4px">
            <span class="span_label">开考时间：</span>
            <span class="span_info" :title="exam.beginTime">{{
              formatDate(exam.beginTime)
            }}</span>
          </div>
          <div style="margin-bottom: 4px">
            <span class="span_label">结束时间：</span>
            <span class="span_info" :title="exam.endTime">{{
              formatDate(exam.endTime)
            }}</span>
          </div>
          <div style="margin-top: 10px 0 50px 0; float: right; padding-bottom: 10px">
            <el-button
              type="warning"
              round
              size="small"
              style="font-size: 14px; padding: 5px"
              icon="el-icon-edit"
              @click="queryScore(exam)"
              >查看成绩</el-button
            >
          </div>
        </div>
      </el-card>
    </div>

    <!-- <el-dialog
      title="新增"
      @close="closeAdd"
      :visible.sync="addVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1152px"
      top="5vh"
    > -->
  </div>
</template>

<script>
import DateUtils from "../../utils/DateUtils.js";
import Constants from '../../utils/Constant.js'
var _this;

export default {
  data() {
    return {
      courses: [],
      exams: [],
      queryParam: {
        fkCourseName: "",
        fkExamName: "",
        statusList: [2],
      },
      allQuestions: [],
    };
  },
  computed: {},
  methods: {
    // 查询成绩
    queryScore(exam) {
      _this.$post("/stuanswer/queryscore", { examUuid: exam.examUuid }).then((res) => {
        if (res.code === 0) {
          let str = "成绩为：" + res.data.totalScore + " 分"
          if(res.data.RADIO_QUESTION !== null && res.data.RADIO_QUESTION !== undefined){
            str = str  + '<br>' + "单选题得分：" + res.data.RADIO_QUESTION + " 分"
          }
          if(res.data.MULTI_SELECT_QUESTION !== null && res.data.MULTI_SELECT_QUESTION !== undefined){
            str = str  + '<br>' + "多选题得分：" + res.data.MULTI_SELECT_QUESTION + " 分"
          }
          if(res.data.TRUE_FALSE_QUESTION !== null && res.data.TRUE_FALSE_QUESTION !== undefined){
            str = str  + '<br>' + "判断题得分：" + res.data.TRUE_FALSE_QUESTION + " 分"
          }
          if(res.data.SHORT_ANSWER_QUESTION !== null && res.data.SHORT_ANSWER_QUESTION !== undefined){
            str = str  + '<br>' + "简答题得分：" + res.data.SHORT_ANSWER_QUESTION + " 分"
          }
          this.$confirm(str, "查询结果", {
            confirmButtonText: "确定",
            type: "success",
            showCancelButton: false,
            dangerouslyUseHTMLString: true,
            showClose: false
          })
        }
      });
    },
    //搜索
    handleSearch() {
      this.getData();
    },
    // 获取课程
    getCourse() {
      this.$post("/course/byuser", null).then((res) => {
        if (res.code === 0) {
          this.courses = res.data;
        }
      });
    },
    // 获取数据
    getData() {
      this.$post("/exam/getistested", this.queryParam).then((res) => {
        if (res.code === 0) {
          this.exams = res.data;
        }
      });
    },
    formatDate(date) {
      return DateUtils.utc2beijing(date);
    },
  },
  created() {
    _this = this;
    this.getCourse();
    this.getData();
  },
  watch: {
    queryParam: {
      handler: (val, oldval) => {
        if (_this.queryParam.fkCourseName !== null) {
          _this.getData();
        }
      },
      deep: true,
    },
  },
  mounted() {},
};
</script>
<style scoped>
.card {
  margin: 0 5px 15px 5px;
  width: 24%;
  border-radius: 15px;
  display: inline-block;
  background-color: #f5f5f5;
  /* background-image: linear-gradient(141deg, #a7cffcec 0%, #a7cffcec 51%, #a7cffcec 75%); */
}
.span_label {
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}
.span_info {
  display: inline-block;
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  max-width: 60%;
  vertical-align: middle;
}
.item {
  margin: 4px;
}
</style>
